<template>

  <div>

    <div style="margin-top: 15px;margin-left: 20px">
      <el-form :inline="true" :model="queryData" status-icon class="demo-form-inline">
        <el-form-item label="查询日期" >
          <el-date-picker  v-model="queryData.startDate" type="date" clearable value-format="yyyy-MM-dd" placeholder="起始日期" ></el-date-picker>
        </el-form-item>
        至
        <el-form-item>
          <el-date-picker v-model="queryData.endDate" clearable type="date" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListData">查询</el-button>
          <el-button type="primary" @click="getExcel" >导出execl</el-button>
        </el-form-item>
        <el-form-item>
          <el-popover
            placement="right"
            width="400"
            trigger="hover"
            @click="getExcelPathList">
            <span v-for="a in pathList">
              <el-link :href="a.filePath" type="primary" >{{a.fileName}}<span class="bank15"></span></el-link>
            </span>
            <el-button @click="getExcelPathList" type="primary" slot="reference">文件</el-button>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>

    <div>

      <el-tabs type="border-card" :stretch="true" v-model="queryData.operationType" @tab-click="this.getListData" style="width: 95%;margin-left: 20px">
        <el-tab-pane label="收入明细" name="1">
         <h5>金额总计：<span>{{sumData.totalSum}}</span>元</h5>
             <p>
              <span>押金(总计):<b>{{sumData.depositSum}}</b></span>
              <span>租金(总计):<b>{{sumData.rentSum}}</b></span>
              <span>电费(总计):<b>{{sumData.electricityFeeSum}}</b></span>
              <span>水费(总计):<b>{{sumData.waterFeeSum}}</b></span>
              <span>宽带(总计):<b>{{sumData.netFeeSum}}</b></span>
              <span>燃气费(总计):<b>{{sumData.gasFeeSum}}</b></span>
              <span>有线电视(总计):<b>{{sumData.cableFeeSum}}</b></span>
              <span>其他(总计):<b>{{sumData.otherFeeSum}}</b></span>
            </p>

          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="dealDate" label="交易时间" value-format="yyyy-MM-dd"></el-table-column>
            <el-table-column prop="total" label="总计（元）"></el-table-column>
            <el-table-column prop="deposit" label="押金（元）"></el-table-column>
            <el-table-column prop="rent" label="租金（元）"></el-table-column>
            <el-table-column prop="electricityFee" label="电费（元）"></el-table-column>
            <el-table-column prop="waterFee" label="水费（元）"></el-table-column>
            <el-table-column prop="netFee" label="宽带（元）"></el-table-column>
            <el-table-column prop="gasFee" label="燃气费（元）"></el-table-column>
            <el-table-column prop="cableFee" label="有线电视费（元）"></el-table-column>
            <el-table-column prop="otherFee" label="其他（元）"></el-table-column>
          </el-table>
          <el-pagination
            background
            style="margin-left: 55%"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.pageNum"
            :page-size="queryData.pageSize"
            layout="prev, pager, next ,jumper"
            :total="queryData.total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="支出明细" name="2">
          <h5>金额总计：<span>{{sumData.totalSum}}</span>元</h5>
          <p>
            <span>押金(总计):<b>{{sumData.depositSum}}</b></span>
            <span>租金(总计):<b>{{sumData.rentSum}}</b></span>
            <span>电费(总计):<b>{{sumData.electricityFeeSum}}</b></span>
            <span>水费(总计):<b>{{sumData.waterFeeSum}}</b></span>
            <span>宽带(总计):<b>{{sumData.netFeeSum}}</b></span>
            <span>燃气费(总计):<b>{{sumData.gasFeeSum}}</b></span>
            <span>有线电视(总计):<b>{{sumData.cableFeeSum}}</b></span>
            <span>其他(总计):<b>{{sumData.otherFeeSum}}</b></span>
          </p>
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="dealDate" label="交易时间" value-format="yyyy-MM-dd"></el-table-column>
            <el-table-column prop="total" label="总计（元）"></el-table-column>
            <el-table-column prop="deposit" label="押金（元）"></el-table-column>
            <el-table-column prop="rent" label="租金（元）"></el-table-column>
            <el-table-column prop="electricityFee" label="电费（元）"></el-table-column>
            <el-table-column prop="waterFee" label="水费（元）"></el-table-column>
            <el-table-column prop="netFee" label="宽带（元）"></el-table-column>
            <el-table-column prop="gasFee" label="燃气费（元）"></el-table-column>
            <el-table-column prop="cableFee" label="有线电视费（元）"></el-table-column>
            <el-table-column prop="otherFee" label="其他（元）"></el-table-column>
          </el-table>

          <el-pagination
            background
            style="margin-left: 55%"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryData.pageNum"
            :page-size="queryData.pageSize"
            layout="prev, pager, next ,jumper"
            :total="queryData.total">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>

    </div>

  </div>

</template>

<script>
import {getCwDealPerDayList , getCwDealPerDayExcel ,getExcelPath} from "@/api/home/contract";
import dayjs from 'dayjs';

export default {
  name: "index",
  data(){
    return{
      queryData:{
        pageSize:10,
        pageNum:1,
        operationType:"1"+"",
        startDate:"",
        endDate:"",
        total:0
      },
      pathList:[],
      tableData:[],
      sumData:{},
    }
  },
  methods:{
    getExcelPathList(){
      getExcelPath().then(res=>{
        console.log(JSON.stringify(res))
        this.pathList=res.rows
      })
    },
    getExcel(){
      let startDate = this.queryData.startDate
      let endDate = this.queryData.endDate
      let flay = true;
      let type = "支出";
      if (this.queryData.operationType == 1){
        type="收入"
      }
      this.pathList.forEach(res=>{
        let name = startDate+"-"+endDate+"("+type+")";
        let a = res.fileName.indexOf(name)
        if(a != -1){
          flay=false
        }
      })
      if (flay){
        //添加任务
         getCwDealPerDayExcel(this.queryData).then(res=>{
        console.log(JSON.stringify(res))
           this.$message.success("下载中，请稍后！")
        // this.downloadFile(res)
      })
      }else {
        this.$message.success("文件已存在可以直接下载^o^!")
      }

    },
    getListData(){
      getCwDealPerDayList(this.queryData).then(res=>{
        // console.log(JSON.stringify(res.data))
        // console.log(JSON.stringify(res.data))
        this.queryData.total = res.data.list.total
        this.tableData = res.data.list.list
        this.sumData = res.data.sum
      })

    },
    downloadFile(data) {
      if (!data) {
        return
      }
      const link = document.createElement('a');
      let blob = new Blob([data], {type: 'application/vnd.ms-excel'});
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      const fileName = this.queryData.startDate+"_"+this.queryData.endDate+ '.xls'
      link.setAttribute('download', fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    //分页
    handleCurrentChange(val) {
      this.queryData.pageNum = val
      this.getListData()
      console.log(`当前页: ${val}`);
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val
      this.getListData()
      console.log(`每页 ${val} 条`);
    },
  },
  mounted() {
    this.queryData.startDate = dayjs(new Date()).format("YYYY-MM-DD")
    this.queryData.endDate = dayjs(new Date()).format("YYYY-MM-DD")
    this.getListData()
    this.getExcelPathList()
  },
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
  height: 60px;
}
</style>
